<template>
  <div class="login-container">
    <el-form class="card-box login-form" ref="loginForm" :model="loginForm" :rules="loginRules" label-position="left">
      <h3 class="title">系统登录</h3>
      <span class="svg-container svg-container_login">
           <i class="icon iconfont icon-kefuyouxian"></i>
      </span>    
      <el-form-item prop="username">         
        <el-input name="username" type="text" v-model="loginForm.username" placeholder="用户名" autoComplete="off"></el-input>
      </el-form-item>
      <span class="svg-container svg-container_login">
           <i class="icon iconfont icon-mima"></i>
      </span>
      <el-form-item prop="password">        
        <el-input v-model="loginForm.password" type='password' placeholder="密码" autoComplete="off"></el-input>
      </el-form-item>

      <el-button type="primary" @click="onSubmit('loginForm')">登陆</el-button>
      <el-button @click="resetForm('loginForm')">重置</el-button>
      
      
    </el-form>
    
  </div>
</template>

<script>
import axios from 'axios';
export default {
   data() {
      return {
        loginForm: {
          username: '',
          password:''         
        },
        loginRules: {
            username: [
                { required: true, message: '请输入用户名', trigger: 'blur' },
                { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ]
        }
      };      
    },    
    methods: {
        onSubmit(loginName) {            
            this.$refs[loginName].validate((valid) => {
            if (valid) {               
                console.log(this.loginForm.name); 
                console.log(this.loginForm.password);  
                axios.get('http://cmdcmd123.com').then(res =>{
                    this.data = res.data;
                    console.log(this.data['name']);
                    console.log(this.data['boolean']);
                    if(this.data['boolean'])
                    {
                        // this.$notify({
                        //     title: '成功',
                        //     message: '登陆成功mockjs模拟',
                        //     type: 'success'
                        // }); 
                        this.$message('这是一条消息提示');
                        // localStorage.setItem('ms_username',this.data['name']);
                        localStorage.setItem('ms_username',this.loginForm.name);                        
                        this.$router.push('/home');
                    }
                    else
                    {
                        this.$notify({
                            title: '失败',
                            message: '账号或密码错误mockjs模拟',
                            type: 'error'
                        }); 
                    }
                }  
                );
                
         
            } else {
                console.log('error submit!!');
                return false;
            }
            });
        },
        resetForm(formName) {
            console.log('reset');
            this.$refs[formName].resetFields();
        }
    }

}
</script>



<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped="" type="text/css">
@import "../../../assets/css/base.css";
  $bg:#2d3a4b;
  $dark_gray:#889aa4;
  $light_gray:#eee;  
  .login-container {    
    height: 100vh;
    background-color: $bg;
    .login-form {
      position: absolute;
      left: 0;
      right: 0;
      width: 400px;
      padding: 35px 35px 15px 35px;
      margin: 120px auto;     
      .title {
        font-size: 26px;
        font-weight: 400;
        color: $light_gray;
        margin: 0px auto 40px auto;
        text-align: center;
        font-weight: bold;
      }   
      .svg-container {
          position: absolute;
          .icon{
            position: relative;
            left:-35px;
            top:2px;
            font-size:30px;
          }
        }  
      .el-form-item { 
        .el-input {
          display: inline-block;         
          width: 85%;         
        }  
      }      
    }
  }
</style>
  

